<style>
    span{
        width: 30px;
        height: 30px;
        background: url("<?cs var:config.docpath?>/images/star.png") no-repeat;
        position: absolute;
        background-size:100% 100%;
        animation: flash 1s alternate infinite;
    }
    @keyframes flash {
        0%{opacity: 0;}
        100%{opacity: 1;}
    }
    span:hover{
        transform: scale(3, 3) rotate(180deg) !important;
        transition: all 1s;
    }
</style>

<script language="javascript" type="text/javascript">
	function dlsvSetStar(w, h, n) {
	     for(var i=0; i<n; i++){
            var span = document.createElement('span');
            document.body.appendChild(span);
            var x = parseInt(Math.random()/2 * w);
            var y = parseInt(Math.random()/2 * h);
            span.style.left = x + 'px';
            span.style.top = y + 'px';
            var scale = Math.random() * 1.5;
            span.style.transform = 'scale('+ scale + ', ' + scale + ')';
            var rate = Math.random() * 1.5;
            span.style.animationDelay = rate + 's';
        }
	}
	(function() {	
		var w = $(window).width();
		var h = $(window).height();
		dlsvSetStar(w*0.4, h*0.1, 4);
    })();
</script>

<script src="<?cs var:config.docpath?>login/js/three.min.js"></script>
<script src="<?cs var:config.docpath?>login/js/postprocessing.min.js"></script>
<script src="<?cs var:config.docpath?>login/js/InfiniteLights.js?v=1"></script>
<script src="<?cs var:config.docpath?>login/js/Distortions.js?v=22"></script>
<script language="javascript" type="text/javascript">
		(function() {
			const container = document.getElementById('login_app');

			const options = {
				onSpeedUp: (ev) => {					
				},
				onSlowDown: (ev) => {
				},
				// mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
				distortion: xyDistortion, 
				
				length: 400,
				roadWidth: 9,
				islandWidth: 2,
				lanesPerRoad: 3,

				fov: 90,
				fovSpeedUp: 150,
				speedUp: 3,
				carLightsFade: 0.4,

				totalSideLightSticks: 50,
				lightPairsPerRoadWay: 30,

				// Percentage of the lane's width
				shoulderLinesWidthPercentage: 0.05,
				brokenLinesWidthPercentage: 0.1,
				brokenLinesLengthPercentage: 0.5,

				/*** These ones have to be arrays of [min,max].  ***/
				lightStickWidth: [0.02, 0.05],
				lightStickHeight: [0.3, 0.7],

				movingAwaySpeed: [20, 50],
				movingCloserSpeed: [-150, -230],

				/****  Anything below can be either a number or an array of [min,max] ****/

				// Length of the lights. Best to be less than total length
				carLightsLength: [400 * 0.05, 400 * 0.2],
				// Radius of the tubes
				carLightsRadius: [0.03, 0.08],
				// Width is percentage of a lane. Numbers from 0 to 1
				carWidthPercentage: [0.1, 0.5],
				// How drunk the driver is.
				// carWidthPercentage's max + carShiftX's max -> Cannot go over 1. 
				// Or cars start going into other lanes 
				carShiftX: [-0.5, 0.5],
				// Self Explanatory
				carFloorSeparation: [0, 0.1],

				colors: {
					roadColor: 0x080808,
					islandColor: 0x0a0a0a,
					background: 0x000000,
					shoulderLines: 0x131318,
					brokenLines: 0x131318,
					/***  Only these colors can be an array ***/
					leftCars: [0x7D0D1B, 0xA90519, 0xff102a],
					rightCars: [0xF1EECE, 0xE6E2B1, 0xDFD98A],
					sticks: 0xF1EECE,
				}
			};

			const myApp = new App(container, options);
			myApp.loadAssets().then(myApp.init)
		})();

</script>


